window.addEventListener('load', function() {
    var details = document.querySelector('.details');
    var remark = document.querySelector('.remark');
    var p = document.querySelector('.rgtP')
    var rgtImg = document.querySelector('#rgtImg');
    var num = 0;
    var comments = document.querySelector('.comments-title');
    var commentsTop = comments.offsetTop;
    var applistScoll = document.querySelector('.applist');
    var grade = document.querySelector('.grade');
    var gradeTop = grade.offsetTop;
    var appNone = document.querySelector('.appnone');
    document.addEventListener('scroll', function() {
        if (window.pageYOffset >= gradeTop) {
            appNone.style.display = 'block';
        } else {
            appNone.style.display = 'none';
        }
        if (window.pageYOffset >= commentsTop) {
            applistScoll.style.top = `${0}rem`;
            applistScoll.style.transition = `top 1s`;
        } else {
            applistScoll.style.transition = '0s';
            applistScoll.style.top = `${-2.25}rem`;
        }
        console.log(window.pageYOffset);
    })

    remark.addEventListener('click', function() {
        if (num == 0) {
            details.className = 'detailsOut';
            p.innerHTML = '收起';
            rgtImg.style.transform = 'rotate(-90deg)';
            num = 1;
        } else {
            details.className = 'details';
            p.innerHTML = '展开';
            rgtImg.style.transform = 'rotate(90deg)';
            num = 0;
        }
    })
})